<template>
  <div class="nav-container">
    <el-menu
        :default-active="activeIndex"
        class="menu-container"
        mode="horizontal"
        :ellipsis="false"
        @select="handleSelect"
    >
      <el-menu-item index = "0" class="logo-container">
        <img
            class="logo"
            src="@/assets/logo000.jpg"
            alt="Element logo"
        />
        <div class="logo-title">基于计算机视觉的鸟类实时监测系统</div>
      </el-menu-item>
      <el-menu-item
          v-for="(item,id) in items"
          :key="id"
          :index="String(id+1)"
          class="menu-item"
          @click="routeNav(id)">
        {{item}}
      </el-menu-item>
      <el-sub-menu index="9">
        <template #title>个人中心</template>
        <el-menu-item index="9-1">个人信息</el-menu-item>
        <el-menu-item index="9-2">修改密码</el-menu-item>
        <el-menu-item index="9-3" @click="logout">退出</el-menu-item>
      </el-sub-menu>
    </el-menu>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from "vue-router";

const router = useRouter()
const route = useRoute()

const items = ref([
  "首页","监测列表","设备管理","账户管理","实时检测","智能识鸟","地图分布","文章分析","图片分析"
])

// 路由路径到菜单索引的映射
const routeToIndexMap: Record<string, string> = {
  '/': '1',
  '/warning': '2',
  '/device': '3',
  '/manage': '4',
  '/camera': '5',
  '/aibird': '6',
  '/map': '7',
  '/analyzetext': '8',
  '/voice': '9'
}

// 初始值从 localStorage 获取，如果没有则设为 '1'
const activeIndex = ref(localStorage.getItem('activeIndex') || '1')

// 监听路由变化，更新 activeIndex
watch(() => route.path, (newPath) => {
  const index = routeToIndexMap[newPath] || '1'
  activeIndex.value = index
  localStorage.setItem('activeIndex', index)
})

// 组件挂载时根据当前路由设置 activeIndex
//确保index不会因为刷新而改变
onMounted(() => {
  const index = routeToIndexMap[route.path] || '1'
  activeIndex.value = index
  localStorage.setItem('activeIndex', index)
})

// 菜单项点击事件处理函数，更新 activeIndex 和 localStorage
const handleSelect = (key: string) => {
  activeIndex.value = key
  localStorage.setItem('activeIndex', key)
}

const routeNav = (id: number) => {
  switch(id) {
    case 0:
      router.push('/')
      break;
    case 1:
      router.push('/warning')
      break;
    case 2:
      router.push('/device')
      break;
    case 3:
      router.push('/manage')
      break;
    case 4:
      router.push('/camera')
      break;
    case 5:
      router.push('/aibird')
      break;
    case 6:
      router.push('/map')
      break;
    case 7:
      router.push('/analyzetext')
      break;
    case 8:
      router.push('/voice')
      break;
    default:
      console.log("error")
      break;
  }
}

const logout = () => {
  // 退出登录逻辑
  localStorage.removeItem('activeIndex')
  router.push('/login')
}
</script>

<style scoped>
.nav-container {
  width: 100%;
  /* 防止整个导航栏被选中 */
  user-select: none;
  position: relative;
}

.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}

.menu-container {
  height: 90px;
  position: fixed;
  z-index: 1000;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.logo-container {
  /* 防止图片被选中 */
  user-select: none;
  /* 防止图片被拖动 */
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  height: 60px;
  width: auto;
}

.logo-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.menu-item {
  font-weight: bold;
  font-size: 17px;
  color: #333;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background-color: #f5f7fa;
  color: #409eff;
}

.main {
  padding-top: 90px; /* 等于导航栏高度 */
  width: 100%;
  min-height: calc(100vh - 90px);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #f8f9fa;
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .menu-container {
    height: auto;
    flex-wrap: wrap;
  }

  .logo-container {
    width: 100%;
    justify-content: center;
    padding: 10px 0;
  }

  .menu-item {
    font-size: 15px;
    padding: 0 10px;
  }
}

@media (max-width: 768px) {
  .logo-title {
    font-size: 16px;
  }

  .menu-item {
    font-size: 14px;
    padding: 0 8px;
  }
}
</style>